/*通用*/
.indexTitle{
    width:100%;
    height:auto;overflow:hidden;
    text-align:center;
}
    .indexTitle h1 {
        font-size: 50px;
        font-weight: bold;
        line-height: 60px;
    }

    .indexTitle h3 {
        font-size: 16px;
        color: #666;
        line-height: 30px;
    }

.indexMore {
    width: 100%;
}

    .indexMore div {
        width: 160px;
        height: 40px;
        line-height: 40px;
        background: linear-gradient(45deg,#004386,#1261b0);
        border-radius: 30px;
        margin: 20px auto;
        text-align: center;
        transition: all 0.5s;
        position: relative;
        z-index: 0;
        color: #fff;
    }

        .indexMore div::after {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            content: '';
            width: 0;
            height: 40px;
            border-radius: 30px;
            background: linear-gradient(45deg,#5d8eff,#a2beff);
            transition: all 0.5s;
            z-index: -1;
        }

        .indexMore div:hover {
            box-shadow: 5px 5px 10px #ccc;
            color: #fff;
        }

            .indexMore div:hover::after {
                width: 100%;
                color: #fff;
            }

/*通用动画*/
@keyframes backgroundChange {
    0% {
        background-color: #2f54ac;
    }
    50% {
        background-color: #114edd;
    }
    100% {
        background-color: #1e4bb4;
    }
}

@-webkit-keyframes scrollBackground{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}
@keyframes scrollBackground{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}

.indexService {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #f1f6ff;
    padding: 100px 0;
}
.indexServiceTitle {
    width: 100%;
    text-align: center;
}
.indexServiceTitle h1{
    font-size:50px;
    font-weight:bold;
    line-height:60px;
}
    .indexServiceTitle h3 {
        font-size: 16px;
        color:#666;
        font-weight:300;
        line-height:30px;
    }

.indexService li {
    width: 19%;
    float: left;
    height: auto;
    overflow: hidden;
    background-color: #fff;
    margin: 20px 1%;
    padding: 30px 2%;
    border-radius: 20px;
    transition: all 0.5s;
}
    .indexService li:hover{
        box-shadow:0 0 10px #ccc;
        margin:10px 1% 30px 1%;
        color:#fff;
    }
        .indexService li:hover div {
            border-top-left-radius: 20px;
            border-bottom-right-radius: 20px;
            border-top-right-radius: 0px;
            border-bottom-left-radius: 0px;
            box-shadow: none;
        }

        .indexService li:hover:nth-child(1) {
            background: linear-gradient(45deg,#52e9fd,#29a3eb);
        }
        .indexService li:hover:nth-child(2) {
            background: linear-gradient(45deg,#7ae696,#1bc5a3);
        }
        .indexService li:hover:nth-child(3) {
            background: linear-gradient(45deg,#fee167,#fec01d);
        }
        .indexService li:hover:nth-child(4) {
            background: linear-gradient(45deg,#ff9697,#fb6b6f);
        }
        .indexService li:hover h2{color:#fff;}
        .indexService li:hover .indexServiceList dt {
            color:#fff;
        }

.indexServiceName{
    width:100%;
    height:auto;overflow:hidden;
    margin-bottom:20px;
}
    .indexServiceName h2 {
        float: left;
        color: #333;
        font-size: 26px;
        font-weight: bold;
        line-height: 70px;
        height:60px;overflow:hidden;
    }

    .indexService li div {
        width: 60px;float:left;
        height: 60px;
        padding: 10px 10px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        box-shadow: 5px 5px 10px #ccc;
        transition: all 0.5s;
        margin-right:20px;
        margin-bottom:10px;
    }

    .indexService li:nth-child(1) div {
        background: linear-gradient(45deg,#52e9fd,#29a3eb);
    }
    .indexService li:nth-child(2) div {
        background: linear-gradient(45deg,#7ae696,#1bc5a3);
    }
    .indexService li:nth-child(3) div {
        background: linear-gradient(45deg,#fee167,#fec01d);
    }
    .indexService li:nth-child(4) div {
        background: linear-gradient(45deg,#ff9697,#fb6b6f);
    }

        .indexService li div img {
            width: 60px;
        }
.indexServiceList{
    width:100%;
    height:auto;overflow:hidden;
}
.indexServiceList dt{
    width:50%;float:left;
    height:30px;line-height:30px;overflow:hidden;
    color:#666;
    font-size:15px;
}

/*公司*/
.indexAboutTitle {
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
    color:#fff;
}

    .indexAboutTitle h2 {
        font-size: 50px;
        font-weight: bold;
        line-height: 60px;
    }

    .indexAboutTitle h3 {
        font-size: 16px;
        font-weight: 300;
        color: #999;
        line-height: 25px;
        margin: 20px auto;
    }
.indexAbout {
    width: 100%;
    height: auto;
    overflow: hidden;
    background: linear-gradient(60deg,#2f54ac,#4a74d8);
    padding:100px 0 0 0;
}
.indexAboutBg {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-image: url(../Images/aboutBg.png);
    background-size: cover;
    animation: scrollBackground 12s linear infinite;
}
.indexAboutList {
    width: 100%;
    height:auto;overflow:hidden;
}
.indexAboutList li{
    width:25%;float:left;
    text-align:center;
    color:#fff;
}
.indexAboutList li div{
    font-size:18px;
    line-height:50px;
}
    .indexAboutList li div span{
        font-size: 50px;
        font-weight:bold;
    }
    .indexAboutList li h2{
        font-size:18px;
        line-height:30px;
    }
    .indexAboutList li h3{
        font-size: 13px;
        font-weight:300;
        line-height: 25px;
        color:#f1f1f1;
    }

    .indexAboutMore {
        width: 100%;
    }
    .indexAboutMore div {
        width: 160px;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        border-radius: 30px;
        margin: 20px auto;
        text-align: center;
        transition: all 0.5s;
        position:relative;
        z-index:0;
    }
        .indexAboutMore div::after {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            content: '';
            width: 0;
            height: 40px;
            border-radius: 30px;
            background: linear-gradient(45deg,#5d8eff,#a2beff);
            transition: all 0.5s;
            z-index: -1;
        }
            .indexAboutMore div:hover {
                box-shadow: 10px 10px 10px #2f54ac;
                color: #fff;
            }
                .indexAboutMore div:hover::after {
                    width: 100%;
                    color: #fff;
                }

/*案例*/
.indexCaseList{
    width:100%;
    height:auto;overflow:hidden;
}
.indexCaseList li{
    width:31.33%;float:left;
    height:auto;overflow:hidden;
    margin:10px 1%;
    position:relative;
}
.indexCaseList li:hover .content{
    left:0;
}
    .indexCaseList li:hover .pic img {
        width: 120%;
        height: 120%;
        top:-10%;
        left:-10%;
    }
    .indexCaseList li .content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: -100%;
        background: rgba(0,0,0,0.8);
        color: #fff;
        transition: all 0.5s;
        z-index: 1;
        justify-content: center;
        align-content: center;
        text-align: center;
    }
    .indexCaseList li .contentCenter {
        width: 90%;
        margin: 10px auto;
        height: 120px;
        overflow: hidden;
    }
.indexCaseList li .content .title {
    width: 100%;
    height: 40px;overflow:hidden;
    line-height: 40px;
    margin: 10px auto;
    font-size:18px;
}
    .indexCaseList li .content .button {
        width: 100%;
        margin: 10px auto;
    }
        .indexCaseList li .content .button a {
            display: inline-block;
            background-color: #004386;
            color: #fff;
            padding: 0px 20px;
            margin-right: 20px;
            line-height: 30px;
            transition: all 0.5s;
            border-radius:20px;
        }
    .indexCaseList li .content .button a:hover{
        background-color:#2f54ac;
    }

.indexCaseList li .pic {
    width: 100%;
    height: 350px;
    position:relative;
}
    .indexCaseList li .pic img{
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        transition:all 0.5s;
        z-index:0;
    }


/*新闻资讯*/
.indexNews {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 100px 0;
    background-color: #F3F3F3;
    /*background-image: url('../Images/newsBg.jpg');
    */
}

.indexNewsContent {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin:50px auto;
    position:relative;
    padding-bottom:30px;
}
.indexNewsList {
    width: 68%;
    height: auto;
    overflow: hidden;
    background-color: #fff;
    padding: 60px 15%;
    transition: all 0.5s;
    border: 5px solid #fff;
}
    .indexNewsList:hover {
        border: 5px solid #2f54ac;
    }
        .indexNewsList:hover .title div {
            padding-left:10%;
            width:90%;
        }
        .indexNewsList:hover .pic img {
            width: 120%;
            height: 120%;
            top:-10%;
            left:-10%;
        }

        .indexNewsList .date {
            width: 100%;
        }
    .indexNewsList .date h3{
        font-size:50px;
        font-weight:bold;
        color:#000;
        line-height:60px;
    }
    .indexNewsList .date h4 {
        font-size: 16px;
        color: #666;
    }
    .indexNewsList .pic {
        width:100%;
        height:150px;
        overflow:hidden;
        margin:20px auto;
        position:relative;
    }
        .indexNewsList .pic img {
            width: 100%;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.5s;
        }
    .indexNewsList .title {
        width: 100%;
    }
    .indexNewsList .title h2{
        width: 100%;
        height:60px;
        line-height:30px;
        font-size:18px;
    }
        .indexNewsList .title div {
            width: 100%;
            text-align: center;
            transition: all 0.5s;
        }

/*免费预约*/
.indexBook{
    width:100%;
    height:auto;overflow:hidden;
    padding:100px 0;
    color:#fff;
    background-image:url(../Images/indexBookBg.jpg);
    background-attachment:fixed;
}
.indexBookTitle{
    width:100%;
}
.indexBookTitle h2{
    font-size:40px;
    font-weight:bold;
    line-height:50px;
}
    .indexBookTitle h3 {
        font-size: 18px;
        line-height: 30px;
        color: #f1f1f1;
    }
.indexBookForm{
    width:100%;
    height:auto;
    margin-top:40px;
}
    .indexBookForm li {
        width: 23%;
        float: left;
        float: left;
        margin-right: 2%;
        font-size: 16px;
    }
.indexBookForm li:nth-child(3){
    width:33%;
}
    .indexBookForm li:nth-child(4) {
        width:15%;
        margin-right:0;
    }

    .indexBookForm li .khInput {
        width:100%;
        height:50px;line-height:50px;
        border:1px solid #fff;
        text-indent:10px;
        transition:all 0.5s;
    }
        .indexBookForm li .khInput::placeholder{
            color:#999;
        }
        .indexBookForm li .khInput:hover {
            border: 1px solid #52e9fd;
        }

        .indexBookForm li .khButton {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: linear-gradient(45deg,#52e9fd,#29a3eb);
            color: #fff;
            border: 0;
            cursor: pointer;
            transition: all 0.5s;
        }
        .indexBookForm li .khButton:hover {
            background: linear-gradient(180deg,#52e9fd,#29a3eb);
        }

/*客户说*/
.indexCustomer {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #f1f6ff;
    padding:100px 0;
}
.indexCustomerContent {
    width: 100%;
    height: auto;
    overflow: hidden;
    position:relative;
    padding-bottom:50px;
}
.indexCustomerList {
    width: 80%;
    height: auto;
    overflow: hidden;
    background-color: #fff;
    padding:50px 8%;
    border-radius:10px;
    transition:all 0.5s;
    margin:10px 2%;
}
.indexCustomerList:hover{
    box-shadow:0 0 10px #ccc;
    background-color:#f1f6ff;
}
    .indexCustomerList .title {
        width:100%;
        height:auto;overflow:hidden;
        border-bottom:1px solid #eee;
    }
    .indexCustomerList .titlePic {
        width: 20%;
        float: left;
    }
        .indexCustomerList .titlePic img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 10px;
        }
    .indexCustomerList .titleWord {
        width:80%;float:left;
    }

        .indexCustomerList .titleWord h2 {
            font-size: 30px;
            font-weight: bold;
            height: 40px;
            overflow: hidden;
            line-height: 40px;
        }
        .indexCustomerList .titleWord h5 {
            font-size: 14px;
            color:#666;
            text-align:right;
            height: 25px;
            overflow: hidden;
            line-height: 25px;
            margin-bottom: 10px;
        }

        .indexCustomerList h3 {
            width:100%;
            font-size:15px;
            font-weight: 300;
            line-height: 25px;
            height:125px;overflow:hidden;
            margin:20px auto 20px auto;
            color:#666;
        }
        .indexCustomerList h4 span {
            display: inline-block;
            width:120px;
            line-height: 30px;
            background: linear-gradient(45deg,#004386,#1261b0);
            color:#fff;
            text-align:center;
            border-radius:20px;
            transition:all 0.5s;
        }
            .indexCustomerList h4 span:hover {
                box-shadow: 5px 5px 10px #ccc;
                color: #fff;
            }

/*合伙伙伴*/
.indexLinkList {
    text-align: center;
}
.indexLinkList li {
    width: 180px;
    display: inline-block;
    padding:10px 10px;
    margin: 20px 10px;
    border: 1px solid #eee;
    transition: all 0.5s;
}
.indexLinkList li:hover{
    box-shadow:0 5px 10px #ddd;
}
    .indexLinkList li img {
        width: 100%;
        /*filter: grayscale(100%);
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        -webkit-filter: grayscale(100%);
        transition: all 0.5s;*/
        transition: transform 0.5s; /* 平滑过渡效果 */
        transform-style: preserve-3d; /* 保持3D变换 */
    }
    .indexLinkList li:hover img {
        animation: flipVertical 2s; /* 鼠标悬停时应用动画 */
    }

@keyframes flipVertical {
    0% {
        transform: rotateY(0deg); /* 开始时无旋转 */
    }

    50% {
        transform: rotateY(180deg); /* 结束时旋转180度 */
    }

    100% {
        transform: rotateY(0deg); /* 结束时旋转180度 */
    }
}


@media(max-width:768px){
    .indexTitle {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .indexTitle h1 {
        font-size: 40px;
        line-height: 50px;
    }

    .indexTitle h3 {
        font-size: 14px;
        line-height: 25px;
    }
    .indexService {
        padding: 50px 0 100px 0;
    }

    .indexServiceTitle {
        width:90%;
        margin-left:auto;
        margin-right:auto;
    }

        .indexServiceTitle h1 {
            font-size: 40px;
            line-height:50px;
        }

        .indexServiceTitle h3 {
            font-size: 14px;
            line-height: 25px;
        }

    .indexService li {
        width: 90%;
        margin: 20px 1%;
        padding: 30px 4%;
    }

    /*公司*/
    .indexAboutTitle {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

        .indexAboutTitle h2 {
            font-size: 40px;
            line-height: 50px;
        }

        .indexAboutTitle h3 {
            font-size: 14px;
            line-height: 25px;
        }

    .indexAbout {
        padding: 30px 0 0 0;
    }
        .indexAboutList li {
            width: 50%;
            float: left;
            text-align: center;
            color: #fff;
            margin-bottom:20px;
        }

            .indexAboutList li div {
                font-size: 14px;
                line-height: 30px;
            }

                .indexAboutList li div span {
                    font-size: 40px;
                    font-weight: bold;
                }

            .indexAboutList li h2 {
                font-size: 14px;
                line-height: 25px;
            }

            .indexAboutList li h3 {
                font-size: 12px;
                line-height:20px;
            }


    /*案例*/
        .indexCaseList li {
            width: 98%;
        }
            .indexCaseList li .pic {
                height: 250px;
            }


    /*新闻资讯*/
    .indexNews {
        padding: 50px 0;
    }

    .indexNewsList {
        width: 88%;
        height: auto;
        overflow: hidden;
        background-color: #fff;
        padding: 20px 5%;
        transition: all 0.5s;
        border: 5px solid #fff;
    }

    /*免费预约*/
        .indexBookTitle h2 {
            font-size: 30px;
            line-height: 40px;
        }

        .indexBookTitle h3 {
            font-size: 16px;
        }

        .indexBookForm li {
            width: 96%;
            margin-right: 2%;
            margin-bottom:10px;
        }

            .indexBookForm li:nth-child(3) {
                width: 50%;
            }

            .indexBookForm li:nth-child(4) {
                width: 45%;
            }

    /*客户说*/
    .indexCustomer {
        padding: 50px 0 10px 0;
    }

    .indexCustomerList {
        width: 88%;
        padding: 50px 5%;
    }

    /*合伙伙伴*/
        .indexLinkList li {
            width: 130px;
            margin-bottom:10px;
        }

}